* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html,
body {
    height: 100%;
    background-color: #e5e8f7;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
    font-size: 128px
}

@font-face {
    font-family: electronicFont;
    src: url(assets/font/DS-DIGIT.TTF)
}

body {
    /* background: #000d4a url(assets/images/bg.jpg) center top; */
    background: linear-gradient(25deg, #0f2249, #182e5a 20%, #0f2249 40%, #182e5a 60%, #0f2249 80%, #182e5a 100%);
    background-size: cover;
    color: #fff;
    font-size: .1rem;
}

.head {
    color: #fff;
    font-size: .11rem;
    height: 0.5rem;
    background: url(assets/images/head_bg.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    z-index: 100;
}

.head h3 {
    color: #fff;
    text-align: center;
    font-size: .2rem;
    line-height: .4rem;
}

.head .tool {
    position: absolute;
    top: .08rem;
    right: .2rem;
}

.head .time {
    position: absolute;
    top: .06rem;
    left: .2rem;
    font-size: .18rem;
}

.head .tool img {
    width: .15rem;
    height: .15rem;
    margin-left: 10px;
}

.head .menu {
    position: absolute;
    top: .02rem;
    left: .3rem;
}

.head .menu li {
    display: inline-block;
    margin: 30px 15px;
    position: relative;
}

.menu li:after {
    position: absolute;
    opacity: 1;
    content: "";
    border-top: 2px solid #02a6b5;
    ;
    border-radius: 2px;
}

.head .menu ul {
    font-size: 0;
}

.head .menu li {
    display: inline-block;
    position: relative;
    margin: 30px 15px;
    ;
}

.head .menu li a {
    display: block;
    font-size: 18px;
    color: #fff;
    line-height: 30px;
    padding: 0 10px;
}
.menu li:before,
.menu li:after {
    position: absolute;
    width: 10px;
    height: 5px;
    opacity: .4;
    content: "";
    border-top: 2px solid #02a6b5;
    top: -1px;
    border-radius: 2px;
}

.menu li:before,
.menu li a:before {
    border-left: 2px solid #02a6b5;
    left: -1px;
}

.menu li:after,
.menu li a:after {
    border-right: 2px solid #02a6b5;
    right: -1px;
}

.menu li a {
    position: relative;
}

.menu li a:before,
.menu li a:after {
    position: absolute;
    width: 10px;
    height: 5px;
    opacity: .4;
    content: "";
    border-bottom: 2px solid #02a6b5;
    bottom: -1px;
    border-radius: 2px;
}

.head .menu li a:hover {
    color: #f4e925;
}

.menu li a:hover:before,
.menu li a:hover:after,
.menu li:hover:before,
.menu li:hover:after {
    border-color: #f4e925;
    opacity: 1;
}

.boxall {
    border: 1px solid rgba(25, 186, 139, .17);
    padding: 0 .2rem 0 .15rem;
    background-size: 100% auto;
    position: relative;
    margin-left: .15rem;
    margin-bottom: .15rem;
    z-index: 10;
}

.boxfoot {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

.boxall{
    border: 1px solid rgba(25,186,139,.17);padding:0 .2rem 0 .15rem;background: rgba(255,255,255,.04);background-size: 100% auto;
    osition: relative;margin-bottom: .15rem;z-index: 10;
}
.boxall:before,
.boxall:after{ position:absolute; width: .1rem; height: .1rem; content: "";  border-top: 2px solid #02a6b5; top: 0;}
.boxall:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
.boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}

.boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
.boxfoot:before,
.boxfoot:after{ position:absolute; width: .1rem; height: .1rem;  content: "";border-bottom: 2px solid #02a6b5; bottom: 0;}

.alltitle {
    font-size: .15rem;
    color: #fff;
    text-align: center;
    line-height: .4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.gauge{width: 100%;height:200px;}
.line{width: 100%;height:465px;}
.temperature ul{margin-left:-.5rem;margin-right:-.5rem;padding: .16rem 0;}
.temperature li{ float: left; width: 50%; text-align: center; position: relative;margin-top: .1rem; margin-bottom: .1rem;}
.temperature li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
.temperature li:last-child:before{ width: 0;}

.temperature li h2{ font-size:.3rem; color: #fff;margin-bottom: .05rem;}
.temperature li span{ font-size:.15rem; color: #fff; opacity: .7;}
.temperature:after, .temperature:before {display: table;content: " ";}
.temperature:after {clear: both;}

.keeptime ul{margin-left:-.5rem;margin-right:-.5rem;padding: .16rem 0;}
.keeptime li{ float: left; width: 20%; text-align: center; position: relative;margin-top: .1rem; margin-bottom: .1rem; cursor: pointer;}
.keeptime li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
.keeptime li:last-child:before{ width: 0;}

.keeptime li h2{ font-size:.25rem; color: #c2c2c2;margin-bottom: .05rem;}
.keeptime li span{ font-size:.15rem; color: #fff; opacity: .8;}
.keeptime:after, .keeptime:before {display: table;content: " ";}
.keeptime:after {clear: both;}

.keeptime .image{text-align: center;}
.keeptime .image img{width: 42px; height: 40px; margin-bottom: .1rem;}

.keeptime li .no{color: #c2c2c2} .keeptime li .ok{color: #ff5722}

.layui-layer-content{color: #000d4a;}

.time ul{margin-left:-.5rem;margin-right:-.5rem;padding: .16rem 0;}
.time li{ float: left; width: 100%; text-align: center; position: relative;margin-top: .1rem; margin-bottom: .1rem;}
.time li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
.time li:last-child:before{ width: 0;}

.time li h2{ font-size:.3rem; color: #fff;margin-bottom: .07rem;}
.time li span{ font-size:.15rem; color: #fff; opacity: .7;}
.time:after, .temperature:before {display: table;content: " ";}
.time:after {clear: both;}

.message{height: 1.55rem;}
.message .layui-table{background-color: transparent;color: #ffffff;}
.message .layui-table-hover{background-color: #fafafa;color: #000000;}